<template>
  <div class="container">
    <Breadcrumb :items="['微信', '微信列表']" />
    <a-table
      row-key="id"
      :columns="columns"
      :data="weixinStore.wxList"
      :pagination="pagination"
    >
      <template #avatar="{ record }">
        <a-avatar>
          <img alt="avatar" :src="record.avatarUrl" />
        </a-avatar>
      </template>
      <template #nick="{ record }">
        <div>{{ record.nick }}</div>
        <div>{{ record.wxNum }}</div>
      </template>
      <template #time="{ record }">
        <div>开始：{{ record.startTime }}</div>
        <div>运行：{{ record.runTime }}</div>
      </template>
      <template #message="{ record }">
        <div>已接收：{{ record.recv }}</div>
        <div>已发送：{{ record.send }}</div>
      </template> 
      <template #action="{ record }">
        <a-button type="primary" @click="handleEdit(record)">管理</a-button>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { useWeixinStore } from '@/store';

  /**
   * 基本配置
   */
  const pagination = ref({
    current: 1,
    pageSize: 10,
    total: 0,
  });
  const router = useRouter();
  const weixinStore = useWeixinStore();
  /**
   * 表格配置
   */
  const columns = [
    {
      title: 'wxid',
      dataIndex: 'wxid',
      width: '200px',
    },
    {
      title: '头像',
      slotName: 'avatar',
      width: '80px',
    },
    {
      title: '呢称',
      slotName: 'nick',
    },
    {
      title: '手机',
      dataIndex: 'phone',
    },
    {
      title: '登录时间',
      slotName: 'time',
    },
    {
      title: '接口授权时间',
      dataIndex: 'expireTime',
    },    
    {
      title: '消息量',
      slotName: 'message',
    },
    {
      title: '操作',
      slotName: 'action',
    },
  ]; 

  // 组件挂载时获取数据
  onMounted(async () => {
    await weixinStore.fetchWxList();
  });

  // 事件
  const handleEdit = (record: any) => {
    router.push({
      name: 'WeixinManage',
      params: {
        id: record.wxid,
      },
    });
  };
</script>

<style scoped>
  .container {
    padding: 0 20px 20px 20px;
  }
</style>
